import React from 'react';
import './index.css';
import {connect} from 'react-redux';
import {getSongList} from '../../store/songList.redux';
import {setSongList} from '../../store/player.redux';
//两个参数：函数[必须return一个对象]、对象
@connect((state)=>({
  data:state.songList.data
}),{getSongList,setSongList})
class SongList extends React.Component{
  constructor(props){
    super(props);
    this.state={};
  }
  componentDidMount(){
    this.props.getSongList(this.props.match.params.id);
  }
  goPlayer=(songMid)=>{
    //1.将当前歌单存储到player.redux中,用于在播放的时候可以切歌
    this.props.setSongList(this.props.data.songList);
    //2.跳转到播放页
    this.props.history.push('/player/'+songMid);
  }
  render(){
    const {data} = this.props;
    if(!data || !data.topInfo){
      return <div></div>
    }
    return (
      <div className="songList">
    <div className="songListBox">
      <div className="loging"></div>
      <div className="headbox headbox2">
        <p className="p1">
          <img src="//y.gtimg.cn/mediastyle/mod/mobile/img/logo_ch.svg?max_age=2592000" alt="" />
        </p>
        <p className="p2">
          <span>戳我查看</span>
        </p>
      </div>
      <div className="songInfoBox">
        <div className="songInfo">
          <p className="song_pic">
            {/* <img src={data.topInfo.picAlbum}/> */}
            <img src="http://y.gtimg.cn/music/photo_new/T003R300x300M000002BI0az0eVVE6.jpg" alt=""/>
          </p>
          <h2 className="song_title">{data.topInfo.listName}</h2>
          <h3 className="song_number">{data.topInfo.listName} 第170天</h3>
          <h3 className="song_time">更新时间: {data.updateTime}</h3>
          <span className="iconfont icon-you song_play" style={{position:'static'}}></span>
        </div>
        <div className="songList">
          <p className="songList_num">
            排行榜
            <span>共{data.totalSongNum}首</span>
          </p>
          <ul>
            {
              data.songList.map((song,index)=>{
                return (
                    <li key={song.songId} onClick={()=>this.goPlayer(song.songMid)}>
                      <p className="songlist_index songlist_num3">{index+1}</p>
                      <div className="songlist_name">
                        <p className="song_name">{song.songName}</p>
                        <p className="singer_name">
                          {
                            song.singer.map(singer=>{
                              return (
                                <span key={singer.singerMid}>
                                  {singer.singerName}
                                </span>
                              )
                            })
                          }
                        </p>
                      </div>
                    <p className="iconfont icon-download songList_xiazai"></p>
                  </li>
                )
              })
            }
          </ul>
        </div>
      </div>
    </div>
  </div>
    )
  }
}

export default  SongList;